<template>
  <a-card :bordered="false" class="card-area">
    <!-- 查询区域 11111-->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :label-col="labelCol" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="5" :sm="8">
            <a-form-item label="计划编号">
              <a-input placeholder="请输入计划编号" v-model="queryParam.planCode"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="8">
            <a-form-item label="计划标题">
              <a-input placeholder="请输入计划标题" v-model="queryParam.planTitle"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="8">
            <a-form-item label="客户姓名">
              <a-input placeholder="请输入客户姓名" v-model="queryParam.patientName"></a-input>
            </a-form-item>
          </a-col>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
           <a-col :md="6" :sm="24">
               <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
               <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
           </a-col>
        </span>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <!--      <a-button @click='handleAdd' type='primary' icon='plus'>新增</a-button>-->

    </div>

    <!-- table区域-begin -->
    <div>
      <!--      <div class='ant-alert ant-alert-info' style='margin-bottom: 16px;'>-->
      <!--        <i class='anticon anticon-info-circle ant-alert-icon'></i>-->
      <!--        <span>已选择</span>-->
      <!--        <a style='font-weight: 600'>-->
      <!--          {{ selectedRowKeys.length }}-->
      <!--        </a>-->
      <!--        <span>项</span>-->
      <!--        <a style='margin-left: 24px' @click='onClearSelected'>清空</a>-->
      <!--      </div>-->

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :scroll='{ x: 1500 }'
        :loading="loading"

        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleExec(record)" v-if="record.execCount>record.finishCount">执行</a>
          <a-divider type="vertical" v-if="record.execCount>record.finishCount" />
          <a @click="handleLogView(record)">查看执行</a>
          <a-divider type="vertical" v-if="record.execCount==record.finishCount" />
          <a-popconfirm title="确定执行完成吗?"
                        @confirm='() => handlePost({id:record.id,status:"2"},"/ch/interview/detail/finish")'
                        v-if="record.execCount==record.finishCount">
              <a>执行完成</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a-popconfirm title="确定任务终止吗?"
                        @confirm='() => handlePost({id:record.id,status:"4"},"/ch/interview/detail/exec")'
                        v-if='record.status=="1"||record.status=="2"'>
              <a>任务终止</a>
          </a-popconfirm>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->
    <!-- 表单区域 -->
    <h-his-interview-plan-exec-modal ref="modalFormExec" @ok="modalFormOk"></h-his-interview-plan-exec-modal>
    <hHisInterviewPlan-modal ref="modalForm" @ok="modalFormOk"></hHisInterviewPlan-modal>
    <h-his-interview-plan-log-modal ref="modalLog"></h-his-interview-plan-log-modal>
  </a-card>
</template>
<script>
import '@/assets/less/TableExpand.less'
import HHisInterviewPlanModal from './modules/HHisInterviewPlanModal'
import HHisInterviewPlanLogModal from './modules/HHisInterviewPlanLogModal'
import HHisInterviewPlanExecModal from './modules/HHisInterviewPlanExecModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { putAction, getAction, postAction } from '@/api/manage'
import { frozenBatch } from '@/api/api'

export default {
  name: 'h_his_interview_planList',
  mixins: [JeecgListMixin],
  components: {
    HHisInterviewPlanModal,
    HHisInterviewPlanLogModal,
    HHisInterviewPlanExecModal
  },
  data() {
    return {
      description: '走访计划管理页面',
      labelCol: { style: { width: '110px' } },
      queryParam: {
        planType: '1'
      },
      // 表头
      columns: [
        {
          title: '计划编号/标题',
          dataIndex: 'planCode',
          align: 'left',
          width: 300,
          customRender: function (text, record, index) {
            let textStr = record.planCode + '\n'
            textStr +=record.planTitle + '\n'
            const answer = textStr.split('\n')
            return answer.map((item) => {
              return <li>{item}</li>
            })
          },
        },
        {
          title: '执行时间',
          align: 'center',
          dataIndex: 'startTime',
          width: 130
        },
        {
          title: '客户姓名',
          align: 'center',
          dataIndex: 'patientName',
          width: 130
        },
        {
          title: '电话',
          align: 'center',
          dataIndex: 'patientPhone',
          width: 130
        },
        {
          title: '地址',
          align: 'center',
          dataIndex: 'patientAddress',
          width: 220
        },
        {
          title: '执行人',
          align: 'center',
          dataIndex: 'eyName',
          width: 130
        },
        {
          title: '执行次数',
          align: 'center',
          dataIndex: 'execCount',
          width: 120
        },
        {
          title: '完成次数',
          align: 'center',
          dataIndex: 'finishCount',
          width: 100
        },
        {
          title: '执行状态',
          align: 'center',
          dataIndex: 'status',
          customRender: function(t, r, index) {
            if (t == '0') {
              return '待执行'
            } else if (t == '1') {
              return '执行中'
            } else if (t == '2') {
              return '执行完成'
            }
            return '终止执行'
          },
          width: 100
        },
        { title: '操作', dataIndex: 'action', align: 'center', width: 230, scopedSlots: { customRender: 'action' } }
      ],
      url: {
        list: '/ch/interview/detail/list/wait'
      },
      id: 0,
      isRefund: false,
      visible: false,
      model: {},
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 10 }
      },
      confirmLoading: false
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    handleLogView: function(record) {
      this.$refs.modalLog.view(record)
      this.$refs.modalLog.title = '执行过程'
      this.$refs.modalLog.disableSubmit = false
    },
    handleExec: function(record) {
      this.$refs.modalFormExec.edit(record)
      this.$refs.modalFormExec.title = '执行操作'
      this.$refs.modalFormExec.disableSubmit = false
    }

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>